<form action="#" id="user-search-form" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label>用户名:</label>
            <div class="layui-inline">
                <input type="text" name="realName" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
            <label>邮箱:</label>
            <div class="layui-inline">
                <input type="text" name="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
            </div>
            <label>状态:</label>
            <div class="layui-inline">
                <input type="text" name="status" autocomplete="off" placeholder="请输入状态" class="layui-input">
            </div>
            <div class="layui-inline">
                <button class="layui-btn" lay-submit lay-filter="search-admin">搜索</button>
            </div>
        </div>
    </div>
</form>
<table class="layui-hide" id="user_table" lay-filter="user_table"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser">增加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delUser">删除</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">授权</a>
</script>

<!-- 增加-->
<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="realName" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户状态</label>
            <div class="layui-input-block">
                <input type="text" name="status" id="status1" lay-verify="status" placeholder="请输入用户状态"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>

<!-- 修改-->
<script type="text/html" id="user-edit-layer">
    <form id="user-edit-form" style="width: 80%" class="layui-form" lay-filter="user-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户状态</label>
            <div class="layui-input-block">
                <input type="text" name="status" id="status2" lay-verify="status" placeholder="请输入用户状态"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

    </form>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;
        var $ = layui.$;
        table.render({
            elem: '#user_table'
            , height: 400
            , url: '/user/getAllUser'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'username', width: 150, title: '用户名', sort: true}
                , {field: 'password', width: 180, title: '密码'}
                , {field: 'email', width: 200, title: '邮箱'}
                , {
                    field: 'status', title: '状态', minWidth: 150, templet: function (d) {
                        return d.status === "0" ? '<span style="color: #cc382b;">未授权</span>' : '<span style="color: #5bcc12;">已授权</span>';
                    }
                },
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['prev', 'page', 'next', 'skip', 'limit', 'count'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 1 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , limits: [5, 10, 15, 20]
            }
        });
        //头工具栏事件
        table.on('toolbar(user_table)', function (obj) {
            /*
            *   检查当前的数据表格选中了哪些数据行
            * */
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addUser':
                    openEditWindow(null);
                    break;
                case 'delUser':
                    var data = table.checkStatus('user_table').data;
                    console.log("删除");
                    if (data.length > 0) {
                        layer.confirm('真的删除行么', function (index) {
                            var param = "";
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            });
                            $.ajax({
                                url: '/user/del',
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.status) {
                                        table.reload('user_table', {});
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    break;
            }
        });

        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: data == null ? $('#user-add-layer').html() : $('#user-edit-layer').html(),
                title: '编辑'
                , area: ['500px', '400px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    layer.load();
                    console.log($("#user-add-form").serialize());
                    $.ajax({
                        url: "/user/" + (data == null ? 'add' : 'update'),
                        data: data == null ? $("#user-add-form").serialize() : $("#user-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.status) {
                                table.reload('user_table', {});
                                layer.close(index);
                            } else {
                                layer.alert(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    });
                }, success: function (layero, index) {
                    // 为编辑模式填充数据
                    if (data != null) {
                        console.log(data);
                        form.val("user-edit-form", data);
                    }
                }

            });

        }

        // 给搜索表单注册单击事件
        form.on('submit(search-admin)', function (data) {
            table.reload('user_table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                /*
                *   where : data.field
                *   where : 可以将数据传递到后端
                *   data　: 代表搜索表单的所有数据
                * */
                where: data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听行工具事件
        table.on('tool(user_table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的授权么', function (index) {

                });
            } else if (obj.event === 'edit') {
                openEditWindow(data);
            }
        });
    });
</script>